@extends('layouts.app')

@section('content')

    <script src="https://cdn.bootcss.com/vue/2.5.16/vue.js"></script>
    <style>
        .fy-button{
            text-align: center;
            cursor: pointer;
            -webkit-user-select:none;
            -moz-user-select:none;
            -ms-user-select:none;
            user-select:none;
        }
        .fy-button:active{
            opacity: 0.8;
        }
        .fy-button_primary{
            background: rebeccapurple;
            width: 60px;
            height: 20px;
            line-height: 20px;
            color: wheat;
            border-radius: 5px;
        }
        .fy-button_text{
            color: blueviolet
        }


        .fy-bg{
            position: fixed;
            top: 0;
            left: 0;
            background: rgba(0,0,0,0.30);
            width: 100%;
            height: 100%;
        }
        .fy-dialog{
            width: 200px;
            height: 200px;
        }
        .fy-float{
            float: left;
            margin-left: 5px;
        }

        tr td, tr th{
            text-align: center
        }
    </style>


<div class="content">

@verbatim

        <div id="set-menu">
            <div>
                <select class="fy-float" name="level" v-model="selectedLevel">
                    <option v-for="(item, index) in level" :key="index" :value="item.value">{{ item.name }}</option>
                </select>
                <select class="fy-float" name="superData" v-model="selectSuperData" v-if='selectedLevel === 2'>
                    <option v-for="(item, index) in data" :key="index" :value="item.id">{{ item.name }}</option>
                </select>
                <select class="fy-float" name="type" v-model="selectType">
                    <option v-for="(item, index) in type" :key="index" :value="item.value">{{ item.name }}</option>
                </select>
                <div class="fy-float fy-button fy-button_primary" @click="addOne">添加</div>
            <div class="fy-float fy-button fy-button_primary" @click="submitData">保存</div>
</div>
    <table class="table table-responsive" >
        <thead>
        <tr>
            <th>级别</th>
            <th>名称</th>
            <th>父级</th>
            <th>类型</th>
            <th>内容</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="(item, index) in tableData">
            <td>{{ item.id>=0?'一级':'二级' }}</td>
            <td>
                <div v-if="index !== editIndex">
                    <p>{{ item.name }}</p>
                </div>
                <div v-if="index === editIndex">
                    <input type="text" v-model="item.name">
                </div>
            </td>
            <td>{{ item.super_name?`${item.super_id}.${item.super_name}`:'无' }}</td>
            <td>{{ item.type }}</td>
            <td>
                <div v-if="item.type === 'media_id'">
                    <div v-if="index !== editIndex">
                        <p>{{ item.media_id }}</p>
                    </div>
                    <div v-if="index === editIndex">
                        <input type="text" v-model="item.media_id">
                    </div>
                </div>
                <div v-if="item.type === 'view'">
                    <div v-if="index !== editIndex">
                        <p>{{ item.url }}</p>
                    </div>
                    <div v-if="index === editIndex">
                        <input type="text" v-model="item.url">
                    </div>
                </div>
                <div v-if="item.type === 'text'">
                    <div v-if="index !== editIndex">
                        <p>{{ item.text }}</p>
                    </div>
                    <div v-if="index === editIndex">
                        <input type="text" v-model="item.text">
                    </div>
                </div>
                <div v-if="item.type === 'miniprogram'">
                    <div v-if="index !== editIndex">
                        <p>{{ item.appid }}</p>
                        <p>{{ item.pagepath }}</p>
                        <p>{{ item.url }}</p>
                    </div>
                    <div v-if="index === editIndex">
                        <input type="text" v-model="item.appid">
                        <input type="text" v-model="item.pagepath">
                        <input type="text" v-model="item.url">
                    </div>
                </div>
            </td>
            <td>
                <div class="fy-button fy-button_text" v-if="index !== editIndex" @click="edit(item, index)" >编辑</div>
                <div class="fy-button fy-button_text" v-if="index !== editIndex" @click="del(item)" style="color: brown;">删除</div>
                <div class="fy-button fy-button_text" v-if="index === editIndex" @click="finish(item, index)" >完成</div>
            </td>
        </tr>
        </tbody>
    </table>
    </div>
</div>
@endverbatim


@endsection



@section('scripts')

    <script>
        const app = new Vue({
            el: '#set-menu',
            data() {
                return {
                    level: [{
                        name: '一级菜单',
                        value: 1
                    },
                        {
                            name: '二级菜单',
                            value: 2
                        }
                    ],
                    selectedLevel: 1,

                    type: [{
                        name: '资源',
                        value: 'media_id',
                        id: 1
                    },
                        {
                            name: '页面',
                            value: 'view',
                            id: 2
                        },
                        {
                            name: '小程序',
                            value: 'miniprogram',
                            id: 3
                        },
                        {
                            name: '文字',
                            value: 'text',
                            id: 4
                        }
                    ],
                    selectType: 'media_id',

                    selectSuperData: 0,

                    editIndex: -1,
                    data: []
                }
            },
            mounted() {
                this.getMenus()
            },
            computed: {
                tableData() {
                    const hasSub = item => item.sub_button ? true : false
                    const rst = []
                    this.data.forEach((item, index)=>{
                        item.id = index;
                    if(hasSub(item)){
                        rst.push(item)
                        item.sub_button.forEach( (sub_item, sub_index)=>{
                            sub_item.super_id = item.id;
                        sub_item.sub_id = sub_index;
                        sub_item.super_name = item.name;
                    })
                        rst.push(...item.sub_button)
                    } else {
                        rst.push(item)
                    }
                })
                    return rst
                }
            },
            watch: {
                selectedLevel(value) {
                    // this.superData = this.data[value]
                    console.log(this.data);
                },
                selectSuperData(value) {
                    console.log(value);
                }
            },
            methods: {
                getMenus() {
                    $.getJSON('getMenu')
                        .done(res => {
                        const data = res.data;
                        data.forEach(item => {
                        item.sub_button ? item.sub_button : item.sub_button = [];
                })
                    this.data = data
                })
                },
                addOne() {
                    if(this.selectedLevel === 1){
                        this.data.push({
                            name: '新建',
                            type: this.selectType,
                            appid: '',
                            pagepath: '',
                            media_id: '',
                            url: '',
                            sub_button: [],
                            text: ''
                        })
                        this.editIndex = this.tableData.length-1;
                    } else if(this.selectedLevel === 2){
                        this.data[this.selectSuperData].sub_button ?
                            this.data[this.selectSuperData].sub_button:
                            this.data[this.selectSuperData].sub_button = [];
                        this.data[this.selectSuperData].sub_button.push({
                            name: '新建',
                            type: this.selectType,
                            appid: '',
                            pagepath: '',
                            media_id: '',
                            url: '',
                            text: ''
                        })
                        this.editIndex = this.tableData.length-1;
                    }
                },
                edit(item, index) {
                    this.editIndex = index;
                },
                finish(item, index){
                    if(item.id >= 0){
                        this.data[item.id].name = item.name;
                        this.data[item.id].type = item.type;
                        this.data[item.id].appid = item.appid;
                        this.data[item.id].pagepath = item.pagepath;
                        this.data[item.id].media_id = item.media_id;
                        this.data[item.id].url = item.url;
                    } else if(item.super_id >= 0){
                        this.data[item.super_id].sub_button[item.sub_id].name = item.name;
                        this.data[item.super_id].sub_button[item.sub_id].type = item.type;
                        this.data[item.super_id].sub_button[item.sub_id].appid = item.appid;
                        this.data[item.super_id].sub_button[item.sub_id].pagepath = item.pagepath;
                        this.data[item.super_id].sub_button[item.sub_id].media_id = item.media_id;
                        this.data[item.super_id].sub_button[item.sub_id].url = item.url;
                    }
                    this.editIndex = -1;
                },
                del(item) {
                    if(item.id >= 0){
                        this.data.splice(item.id, 1);
                    } else if(item.super_id >= 0){
                        this.data[item.super_id].sub_button.splice(item.sub_id, 1);
                    }
                },
                submitData() {
                    $.post('getMenu', {menus: this.data})
                        .done(res => {
                        console.log(res);
                    if(res.status === 1){
                        alert(res.msg||'成功');
                    }else{
                        alert(res.msg);
                    }
                    // alert('错误');
                })
                }
            }
        })
    </script>

@endsection
